<script lang="ts" setup>
import { useVariableStore } from "@/stores/variable"
const variableStore = useVariableStore()
</script>

<template>
    <umrp-page bg-color="#f2f2f2">
        <umrp-title-bar text="设置">
            <umrp-icon name="left" :size="20" v-route="'XiaolankaClientMe'"></umrp-icon>
        </umrp-title-bar>
        <umrp-container padding="0 16px" :gap="10">
            <umrp-card :border="false">
                <template #body>
                    <umrp-container padding="16px">
                        <umrp-list :border="false" size="small">
                            <!-- @ts-ignore -->
                            <umrp-list-item label="头像" @click="$state('avatarEdit', true)" arrow>
                                <template #value>
                                    <umrp-avatar :width="32" :height="32"></umrp-avatar>
                                </template>
                            </umrp-list-item>
                            <umrp-list-item label="昵称" value="黄先生" arrow
                                @click="variableStore.variable.nickName = true"></umrp-list-item>
                        </umrp-list>
                    </umrp-container>
                </template>
            </umrp-card>
            <umrp-button v-route="'XiaolankaClientHome'"
                :custom-styles="{ backgroundColor: '#fff', border: 'none' }">退出登录</umrp-button>
        </umrp-container>
        <umrp-action-sheet state="avatarEdit"></umrp-action-sheet>
        <umrp-drawer :visible="variableStore.variable.nickName" title="修改昵称">
            <umrp-container padding="0 16px 16px" :gap="16">
                <umrp-input placeholder="请输入昵称"></umrp-input>
                <umrp-text color="secondary" :size="12">昵称限制1-10个字符，一个汉字为1个字符</umrp-text>
                <umrp-button type="primary" shape="round"
                    @click="variableStore.variable.nickName = false">保存</umrp-button>
            </umrp-container>
        </umrp-drawer>
    </umrp-page>
</template>